CMJP x CMDN デザイン ワークショップを開催しました！

こんにちは！
クラスメソッドダナンの伊藤です。
先日、クラスメソッドの日本メンバー2名をダナンに迎え、ベトナムメンバーを対象としたワークショップを開催しました！
ワークショップでは、日本人とベトナム人メンバーが知識や意見を共有して交流する貴重な機会となりました。
その様子をレポートします。

英語版の記事はこちらから：
The First Design Workshop Insights: CMJP x CMDN Collaboration

今回のワークショップについて

• 実施時間：1時間30分

• 言語：英語（難しいところは、日本語とベトナム語の通訳を介して行いました。）

• 内容
  ワークショップは、包括的な学習体験を提供するように設計されており、2つのセクションがありました。

1. デザインの基礎
   デザインの基礎についての解説

2. ユーザー・ストーリー・マッピング（USM）
   チームに分かれて実際にユーザー・ストーリー・マッピング（USM）を作成して、発表を行いました。

セクション 1: デザインの基礎

セクション１では、デザインの基礎についてクラスメソッドジャパンのデザイナーから解説いただきました。

• デザインとは、単に見栄えを良くすることではなく、効果的なコミュニケーションを図り、視覚的に問題を解決すること。
• インパクトがあり、ユーザーに親しみやすいインターフェイスを作成するために必要なデザイン原則の4つの柱がある。

1. 対比

対比とは、強弱で情報の重要度に差をつける技術です。
デザインでは、次のような使い方をします：

• 太い色、大きな文字、異なるフォントを使用して、重要な情報を強調する。
• 視覚的な差を作り、ユーザーが主要素と副要素を簡単に区別できるようにする。

分かりにくく情報が伝わらないデザインにすることを避け、一番重要な要素を強調してバランスをとる方法を学びました。

2. 反復

反復によって一貫性が生まれます。
これは、フォント、色、形などのデザイン要素を、製品やウェブサイトの異なるセクション間で再利用することです。

この原則によって、次のことが可能です：

• まとまりのあるデザインになる。
• ユーザーがパターンを認識できるため、ユーザビリティとナビゲーションが向上する。

一貫性のないデザインの実例をもとに、それを修正するために反復を適用する方法について学びました。

3. 整列

整列とは、すっきりと整理されたデザインを作り出すために要素の配置する方法を指す。
適切な配置：

• 各要素の関係を明確にする
• 視覚的な乱雑さを減らすことで、読みやすさを向上する

例えば、テキストや画像をグリッドに揃えることで、ユーザーの視線が論理的な流れに沿うようになります。

デザインツールを使って複雑なレイアウトの位置を合わせる方法を実際に見て、見やすくスマートな外観を実現する方法を理解しました。

4. 近接

近接は、関連する要素をグループ化することを指します。
ユーザーがコンテンツ間の関係を理解しやすくなり、混乱を避けるのに役立ちます。

例えば、

• 見出しは、その段落の近くに配置し、関連性を即座に明確にする
• 特定のタスクに関連するボタンは、混乱を避けるためにグループ化される

演習では、設計の悪いインターフェイスを評価し、近接を使って再設計することで、わかりやすさとユーザー体験を向上させる方法を学びました。

セクション2: ユーザー・ストーリー・マッピング（USM）

セクション２では、アジャイル開発における強力なツールであるユーザーストーリーマッピング（USM） を学びました。
これは、開発チームがクライアントのニーズを理解するのに役立ち、ユーザーニーズとビジネスゴールに沿った開発を目指します。

1. ユーザー・ストーリー・マッピング（USM）の基礎

ユーザー・ストーリー・マッピング（USM）とは、タスクや機能を視覚的なマップに整理し、ユーザーと製品とのインタラクションのストーリーを理解するためのものです。

主な利点：

• 複雑なワークフローをステップに分けて理解できる
• ユーザー価値とビジネスへの影響に基づく機能の優先順位付けがしやすくなる
• 機能横断的なチームで共通認識を持つことができる
  発表者は、このツールが、技術仕様ではなくユーザーの成果に焦点を当てることで、従来の要求文書とどのように異なるかを説明した。

2. ユーザー・ストーリー・マッピング（USM）の実践

ワークショップでは、ユーザー・ストーリー・マップの作成方法についてグループに分かれて実践しました。

その内容は以下の通り：

• ユーザーゴールの特定： ユーザーは何を達成したいのか？
• タスクの分解： ゴールを達成するために、ユーザーはどのようなステップを踏まなければならないか？
• 機能のマッピング： どの機能がどのステップをサポートするか？

参加者はグループに分かれ、仮想プロジェクトのユーザーストーリーマップを作成しました。

ユーザーの視点に立って考えることで、漠然とした要件を具体的な機能やストーリーに置き換えて考える練習をしました。
例えば、「ユーザーがスムーズにチェックアウトを完了できること」は、支払い方法の検証やモバイルの応答性の確保など、実行可能な小さなタスクに分解されました。

次回のワークショップへ向けて

このように日本メンバーとベトナムメンバーでワークショップを実施する試みは今回が初めてでしたが、クラスメソッドの日本メンバーとベトナムメンバー間で国境を超えたコラボレーションを実現することができました！
特にベトナムメンバーにとっては大きな収穫と良い刺激になったと思います。

今後もこのような機会を設け、日本メンバーとベトナムメンバーで共に学び、共に成長し、チームとしてより良いプロジェクトを作り上げていきたいと考えています。

最後に、今回のような素晴らしいワークショップを実施いただいた、かなみさん、かりんさん、
本当にありがとうございました！！！